<template>
    <div class="PersonData">
        <div class="close" @click="closePrompt">
            <img src="./icons/close.png" alt="" width="15px" height="15px">
        </div>
        <div class="loMain">
            <div class="loName">
                <div class="textName">个人信息</div>

            </div>
        </div>
        <div class="LoginInput">
            <el-form :model="form" label-width="auto" style="max-width: 600px">
                <el-form-item label="用户名">
                    <el-input v-model="form.username" />
                </el-form-item>
                <el-form-item label="昵称">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="选择下列头像">
                    <el-input v-model="form.imgCode" />
                    <div class="photoBox" v-for="(imgUrl, index) in imgUrls" :key="index">
                        <div>
                            <img :src="imgUrl" alt="" width="70px" height="70px" @click="imagesIndex(index + 1)">
                        </div>
                    </div>
                </el-form-item>

                <!-- <el-form-item label="Activity zone">
                    <el-select v-model="form.region" placeholder="please select your zone">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select>
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">修改</el-button>
                    <el-button @click="Cannel">取消</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script>
import * as jose from 'jose';
import instance from '@/utils/request'

export default {
    data() {
        return {
            username: '',
        
            imgUrls: ['/images/1.jpg', '/images/2.jpg', '/images/3.jpg', '/images/4.jpg', '/images/5.jpg', '/images/6.jpg'],
            form: {
                username: '',
                name: '',
                imgCode: '',
                TkId: ''
            },
        }
    },
    methods: {
        closePrompt() {
            this.$emit('changeIsShow', false)
        },
        imagesIndex(index) {
            console.log("123");
            this.form.imgCode = index; // 将选中的图片index 赋值给 form.imgCode
        },
        onSubmit(){
            instance.put("users",{
                id:this.TkId,
                username:this.form.username,
                name:this.form.name,
                imgCode:this.form.imgCode
            }).then(res =>{
                localStorage.setItem('token', res.data.data)
                this.closePrompt()
                window.location.reload()
            }).catch(err =>{
                console.log(err);
            })
        },
        Cannel(){
            this.closePrompt()
        }
     
    },
    created() {
        const tokenDecode = jose.decodeJwt(localStorage.getItem('token'))
        this.TkId = tokenDecode.id
        console.log(this.TkId);
        instance.get(`users/${this.TkId}`).then(result => {
            this.form = result.data.data
            console.log(this.form);
        })
    }
}
</script>

<style scoped>
.PersonData {
    width: 90vw;
    max-width: 600px;
    height: auto;
    /* max-height: 300px; */
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 20;
}

.username {
    height: 30%;
}

.username span {
    display: inline-block;
    width: 20%;
    text-align: center;
    font-size: 15px;
}

.passwd {
    height: 30%;
}

.passwd span {
    display: inline-block;
    width: 20%;
    text-align: center;
    font-size: 15px;
}

.LoginInput {
    width: 60%;
    margin: 20px auto;
    border: 1px solid #e3e5e7;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
}

.LoginInput input {
    width: 30%;
    max-width: 70%;
    border: none;
    border-radius: 10px;
    padding: 6px;
    outline: none;
}

.LoginInput hr {
    border: none;
    background-color: #e3e5e7;
    height: 1px;
    width: 100%;
}

.loMain {
    width: 100%;
    height: auto;
    border: none;
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;
    background-color: #fff;
}

.loImage {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    /* border: solid 1px red; */
}

.loImage img {
    border-radius: 50%;
    /* border: solid 1px red; */
    width: 60px;
    height: 60px;
}

.textName {
    /* border: solid 1px red; */
    margin: 10px;
    text-align: center;
}

.loList {
    display: flex;
    /* border: solid 1px red; */
    margin: 0px;
    padding: 0px;
}

.loList ul:hover {
    color: #49caec;
    cursor: pointer;
}

.loList ul {
    list-style: none;
    border-bottom: solid 1px black;
    /* border: solid 1px red; */
    padding: 10px;
}

.loList ul li {
    /* border: solid 1px red; */
    width: 40px;
    text-align: center;
}

.loname {
    width: 100%;
}

.photoBox img {
    padding: 4px;
}
</style>